<!--
/**
* Author: zyf
* Date: 2020-07-16 09:41
* Desc: ZmTimePicker
*/
-->
<template>
  <el-time-picker v-model="currentValue" v-bind="$attrs" v-on="$listeners" :placeholder="placeholder" :value-format="valueFormat"
    :start-placeholder="startPlaceholder" :end-placeholder="endPlaceholder"
/>
</template>

<script>
export default {
  name: 'ZmTimePicker',
  props: {
    value: {
      type: [String, Array]
    },
    placeholder: {
      type: String,
      default: '请选择时间'
    },
    valueFormat: {
      type: String,
      default () {
        return 'HH:mm:ss'
      }
    },
    startPlaceholder: {
      type: String,
      default () {
        return '开始时间'
      }
    },
    endPlaceholder: {
      type: String,
      default () {
        return '结束时间'
      }
    },
    // 当前包含时间的对象
    target: Object,
    startKey: {
      type: String,
      default: 'startAt'
    },
    endKey: {
      type: String,
      default: 'endAt'
    }

  },
  data () {
    return {
    }
  },
  computed: {
    currentValue: {
      set (v) {
        const target = this.target
        if (target) {
          v = v || []
          target[this.startKey] = v[0]
          target[this.endKey] = v[1]
          return
        }
        this.$nextTick(() => {
          this.$emit('input', v || '')
        })
      },
      get () {
        const target = this.target
        if (target) {
          let statr = target[this.startKey] || ''
          let end = target[this.endKey] || ''
          const array = [statr, end]
          return array
        }
        return this.value || ''
      }
    }
  },
  methods: {
    // 初始化方法
    init () { }
  }
}

</script>
<style lang='scss' scoped>
</style>
